<template>
	<view class="nav-bottom">
		<view class="nav-event">
			<image class="nav-img" src="@/static/index/btn01@2x.png"></image>
			<view class="bnt" @tap="navtab(index)" :class="index===0?'bnt-left':'bnt-right'" v-for="(item,index) in tabbar" :key="index">
				<view class="d-flex a-center flex-column">
					<image v-if="indexactive===index" :src="item.show"></image>
					<image v-else :src="item.hidden"></image>
					<text :class="indexactive===index?'active':''">{{item.name}}</text>
				</view>
			</view>
			<view class="bnt-midddt" @click="navBaer">
				<view class="d-flex a-center flex-column">
					<image src="@/static/index/dk01@2x.png"></image>
					<text>打卡</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import top1 from "../static/index/sy-xz01@2x.png"
	import top2 from "../static/index/sy01@2x.png"
	import top3 from "../static/index/wd-xz01@2x.png"
	import top4 from "../static/index/wd01@2x.png"
	export default {
		data(){
			return {
				indexactive:0,
				tabbar:[
					{
						name:'首页',
						show:top1,
						hidden:top2
					},
					{
						name:'我的',
						show:top3,
						hidden:top4
					}
				]
			}
		},
		props:{
			tabID:{
				type:Number,
				default:0
			}
		},
		computed:{
			IDtab:function(){
				return this.indexactive=this.tabID
			}
		},
		methods:{
			navtab(index){
				this.indexactive = index
				if(index===0&&this.tabID===1){
					uni.reLaunch({
						url:'/pages/index/index'
					})
				}else if(index===1&&this.tabID===0){
					uni.reLaunch({
						url:'/pages/my/my?tabId='+ 1
					})
				}
			},
			navBaer(){
				uni.navigateTo({
					url:'/pages/punch/punch'
				})
			}
		}
	}
</script>

<style lang="scss">
	.active{
		color:#4BC1B8;
	}
	.nav-bottom{
		position: fixed;
		bottom: 44rpx;
		margin:0 30rpx;
		width:690rpx;
		height: 176rpx;
		.nav-event{
			position: relative;
			.nav-img{
				width:690rpx;
				height: 176rpx;
			}
			.bnt{
				position: absolute;
				top:50%;
				transform: translateY(-25%);
				color:#FFFFFF;
				image{
					width: 43rpx;
					height: 43rpx;
				}
				text{
					font-size: 24rpx;
				}
			}
			.bnt-left{
				left:120rpx;
			}
			.bnt-right{
				right:120rpx;
			}
			.bnt-midddt{
				position: absolute;
				top:23rpx;
				left:296rpx;
				bottom: 102rpx;
				right:322rpx;
				width: 103rpx;
				height: 88rpx;
				image{
					width: 45rpx;
					height: 51rpx;
				}
				text{
					width: 48rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 300;
					color: #FFFFFF;
				}
			}
		}
	}
</style>
